import QtQuick 2.0
import QtQuick.Controls 2.0

Item {
    id: sliderItem
    property bool is_enabled: true
    Row{
        spacing: 43
        Row{
            spacing: 12
            Text {
                color: Qt.rgba(255, 255, 255, 0.5)
                text: String(control.from) + "m"
                font{
                    family: "Microsoft YaHei"
                    pixelSize: 20
                }
            }

            Slider {
                id: control
                from: 0
                value: 3.75
                to: 5.75

                background: Rectangle {
                    x: control.leftPadding
                    y: control.topPadding + control.availableHeight / 2 - height / 2
                    implicitWidth: 352
                    implicitHeight: 12
                    width: control.availableWidth
                    height: implicitHeight
                    radius: 2
                    color: Qt.rgba(255, 255, 255, 0.1)

                    Rectangle {
                        width: control.visualPosition * parent.width
                        height: parent.height
                        color: sliderItem.is_enabled ? "#1F87E6" : Qt.rgba(255, 255, 255, 0.4)
                        radius: 2
                    }
                }

                handle: Rectangle {
                    x: control.leftPadding + control.visualPosition * (control.availableWidth - width)
                    y: control.topPadding + control.availableHeight / 2 - height / 2
                    implicitWidth: 22
                    implicitHeight: 22
                    radius: 11
                    color: sliderItem.is_enabled ? "#00C2FF" : Qt.rgba(255, 255, 255, 0.4)
                }
            }

            Text {
                color: Qt.rgba(255, 255, 255, 0.5)
                text: String(control.to) + "m"
                font{
                    family: "Microsoft YaHei"
                    pixelSize: 20
                }
            }
        }

        Rectangle{
            width: 142
            height: 40
            color: "#272C39"
            border.color: sliderItem.is_enabled ? "#259AFC" : Qt.rgba(255, 255, 255, 0.4)

            TextField {
                anchors.centerIn: parent
                inputMethodHints: Qt.ImhFormattedNumbersOnly
                color: sliderItem.is_enabled ? "white" : Qt.rgba(255, 255, 255, 0.4)
                text: String(control.value.toFixed(2))
                font{
                    family: "Microsoft YaHei"
                    pixelSize: 22
                }
                onAccepted: {
                    control.value = Number(text)
                }
                background: Rectangle{
                    border.width: 0
                    opacity: 0
                }
            }
        }
    }
}
